<template>
    <div class="share_content">
        <!-- 分享弹窗 -->
        <nut-overlay v-model:visible="isShow" @click="isShow = false">
            <div class="share_main">
                <ImgT src="/imgs/me/share_top.webp" class="top_img" alt="" />
                <div class="share_img">
                    <div class="qr_code_wrap">
                        <vue-qr id="qrid" backgroundColor="#515089" text="http://43.199.35.53:8088/index.html"
                            :size="200" logoSrc="/imgs/me/logo.webp" class="qr_code"></vue-qr>
                    </div>

                    <!-- <ImgT src="/imgs/me/mask.webp" class="mask_img" alt="" /> -->
                    <div class="share_bottom">
                        <nut-button class="save" @click="toSave">保存图片</nut-button>
                        <nut-button class="copy" @click="copyClick">复制链接</nut-button>
                    </div>
                    <ImgT src="/imgs/me/close.webp" @click="isShow = false" v-shrink-on-click class="close" alt="" />
                </div>

            </div>
        </nut-overlay>
        <Toast v-model:visible="showToast">{{ t(toast_value) }}</Toast>
    </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
import { copyFn } from '@/utils/publicMethods'
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const toast_value = ref()
const showToast = ref(false)
const props = defineProps({
    visible: {
        type: Boolean,
        default: true,
    },
})
const emit = defineEmits(['update:visible', 'close']);
const isShow = computed({
    get: function () {
        return props.visible;
    },
    set: function (value) {
        emit('update:visible', value);
    },
});

// 复制
const copyClick = () => {
    copyFn('http://43.199.35.53:8088/index.html')
    showToast.value = true
    toast_value.value = 'copy_success'
}

// 前往下载
const toSave = () => {
    let picData = document.getElementById('qrid') as HTMLImageElement; //生成二维码之后其实是个img
    if (picData) {
        let a = document.createElement('a');
        a.href = picData.src;
        a.download = `image.png`;
        a.click();
        setTimeout(() => {
            a.remove();
        }, 1000);
    }

}

</script>

<style lang='scss' scoped>
.share_main {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 0 14px;

    .top_img {
        width: 100%;
    }

    // background-color: #131232;
}

.share_img {
    position: relative;
    height: 280px;
    width: 100%;
    background: #131232;
    margin-top: -60px;

    .qr_code_wrap {
        position: absolute;
        top: 10px;
        left: 50%;
        z-index: 100;
        border-radius: 12px;
        transform: translateX(-50%);
        border: 1px solid #2E296B;
        padding: 11px;
    }



    .close {
        position: absolute;
        bottom: -41px;
        left: 50%;
        height: 32px;
        transform: translateX(-46%)
    }

    // width: 236px;
    // height: 159px;
    // background: url(/imgs/me/mask.webp);
    // background-size: 100% 100%;
    // background-repeat: no-repeat;

    .qr_code {
        border-radius: 12px;
        width: 170px;
        height: 170px;

    }
}

.mask_img {
    width: 236px;
    height: 159px;
    position: absolute;
    bottom: 35px;
    left: 50%;
    right: 0;
    z-index: 10;
    transform: translateX(-50%)
}

.share_bottom {
    position: absolute;
    bottom: 15px;
    display: flex;
    padding: 0 20px;
    gap: 13px;

    .save {
        width: 147px;
        height: 44px;
        background: #4B4A6E !important;
        border-radius: 8px;
    }

    .copy {
        width: 147px;
        height: 44px;
        border-radius: 8px;
    }


}

//.share_bottom {
//     width: 236px;
//     height: 84px;
//     position: absolute;
//     bottom: 35px;
//     left: 50%;
//     right: 0;
//     z-index: 111;
//     background: url(/imgs/me/share_bottom.webp);
//     background-size: 100% 100%;
//     background-repeat: no-repeat;
//     display: flex;
//     justify-content: space-around;
//     transform: translateX(-50%);

//     .action {
//         margin-top: 15px;
//         display: flex;
//         flex-direction: column;
//         align-items: center;
//         justify-content: center;

//         font-size: 11px;
//         color: #ffffff;

//         img {
//             height: 34px;
//         }
//     }
// }

:deep(.nut-popup) {
    background: unset;
}
</style>